<template>
  <div class="home">
    <div class="content" ref="content"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import * as THREE from "three"
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import { svgToModel } from "@/common/buildings/svgmodel.js"
import { cameraReset } from "@/common/buildings/camerareset.js"
const svgLoader = new SVGLoader()
let meshGroup = new THREE.Group()
const content = ref(null)
const position = {
  x: 800,
  y: 800,
  z: 800
}
const lookat = {
  x: 0,
  y: 0,
  z: 0
}
let width = window.innerWidth
let height = window.innerHeight
let camera = new THREE.PerspectiveCamera(45, width / height, 10, 500000) //摄像机对象
let scene = new THREE.Scene()
let renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
})
let controls = new OrbitControls(camera, renderer.domElement)
const initScene = () => {
  const ambient = new THREE.AmbientLight(0xffffff, 0.6)
  scene.add(ambient)
  // 平行光
  var dtLight = new THREE.DirectionalLight(0xffffff, 0.4)
  dtLight.position.set(0, 100, 0)
  scene.add(dtLight)
  // 半球光
  var light = new THREE.HemisphereLight(0xffffff, 0x000000, 0.12)
  light.position.set(0, 1, 0)
  scene.add(light)
  // 辅助坐标
  // const axesHelper = new THREE.AxesHelper(500)
  // scene.add(axesHelper)
  // 修改相机,场景的参数
  camera.position.set(position.x, position.y, position.z)
  camera.lookAt(lookat.x, lookat.y, lookat.z)
  controls.target = new THREE.Vector3(lookat.x, lookat.y, lookat.z)
  controls.enableDamping = true // 使动画循环使用时阻尼或自转
  controls.dampingFactor = 0.6 // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
  controls.enableRotate = true // 是否可以旋转
  controls.enableZoom = 3500 // 最大距离
  // controls.maxPolarAngle = Math.PI / 2.5; // 控制上下旋转最大角度
  // controls.minPolarAngle = Math.PI / 2; // 控制上下旋转最小角度
  controls.panSpeed = 2 // 位移速度
  controls.minDistance = 100 // 设置相机距离原点的最近距离
  controls.maxDistance = 25000 // 设置相机距离原点的最远距离
  controls.enablePan = true // 是否开启右键拖拽
  //render的相关设置 .清晰度乘以3场景更清晰
  renderer.setPixelRatio(window.devicePixelRatio * 1.5)
  renderer.setSize(width, height)
  renderer.setClearColor(0x333333, 1)
  loadSvg()
  return renderer.domElement
}
const loadSvg = () => {
  svgLoader.load("./svg/厦门会展中心_1F_14.svg", data => {
    console.log("svg数据", data)
    let group = svgToModel(data, "test", 1, "jingling")
    let mesh = group.getObjectByName("background")
    console.log("底部背景", mesh)
    const box3 = new THREE.Box3().setFromObject(mesh) // 从某个对象获取边界
    const center = new THREE.Vector3()
    box3.getCenter(center)
    console.log("中心", center)
    let position = {
      x: center.x,
      y: center.y + 500,
      z: center.z + 500
    }
    let lookAt = {
      x: center.x,
      y: center.y,
      z: center.z
    }
    cameraReset(camera, controls, position, lookAt)
    meshGroup.add(group)
    scene.add(meshGroup)
    console.log("scene", scene)
  })
}
const onWindowResize = () => {
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.setSize(width, height)
}
const Render = () => {
  controls.update()
  // console.log(camera.position);
  renderer.render(scene, camera)
  requestAnimationFrame(Render)
}
onMounted(() => {
  content.value.appendChild(initScene())
  Render()
  window.addEventListener(
    "resize",
    () => {
      onWindowResize()
    },
    false
  )
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  // background-color: #ff3200;
}
</style>
